<template>
  <div class="box">
    <div class="nav">
      <h3>可视化展板ECharts</h3>
    </div>
    <div class="content">
  
      <div class="box-left">
      <div class="panel">
          <h2 class="h2">柱形图—就业行业</h2>
          <div class="chart">
                  图标
            </div>
      </div>
       <div class="panel">
          <h2 class="h2">柱形图—就业行业</h2>
          <div class="chart">
                  图标
            </div>
      </div>
       <div class="panel">
          <h2 class="h2">柱形图—就业行业</h2>
          <div class="chart">
                  图标
            </div>
      </div>
      </div>



      <div class="box-center">
         <div class="no">
        上面数字
         </div>
           <div class="map">
             底部地图
           </div>
      </div>


      <div class="box-right">
       <div class="panel">
          <h2 class="h2">柱形图—就业行业</h2>
          <div class="chart">
                  图标
            </div>
      </div>
       <div class="panel">
          <h2 class="h2">柱形图—就业行业</h2>
          <div class="chart">
                  图标
            </div>
      </div>
       <div class="panel">
          <h2 class="h2">柱形图—就业行业</h2>
          <div class="chart">
                  图标
            </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped >
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box{
width: 100%;
height: 1600rem;

background: url(../../images/bg.jpg)
}
.nav{
background: rgba(255, 255, 255, 0.2);
 text-align: center;
  color: aliceblue;
  background: url(../../images/head_bg.png);
  height:3rem ;
  line-height: 3rem ;
 padding: 0 0.1875rem 0.5rem;
}
.content{
  display: flex;
   margin-top: 1rem;
}
.box-left{
width: 30%;

}
.box-center{
width: 38%;
margin: 0 0.3rem; 

}
.box-right{
width: 30%;

}
.panel{
 
  height: 10.875rem;
  padding: 0 0.1875rem 0.5rem;
  border: 1px solid rgba(25, 186, 139, 0.17) ;
  margin-bottom: 0.185rem;
  background: url(../../images/line(1\).png) rgba(255, 255, 255, 0.04);
  
}

.h2{
  color: aliceblue;
 text-align: center;
  font-size: 1rem;
}
.chart{
  height: 8rem;
  background: sandybrown
}
.no{
background:  rgba(101, 132, 226, 0.1);
padding: .1875rem;
}
.map{
  
}
</style>
